<!-- 监控总览-资产概况-1 -->
<script setup lang="ts">
import { computed, ref, watch } from 'vue'

// 数据中心数据
const dataCenter = ref([
  {
    code: '数据中心1',
    name: '管理员：李四',
    dress: '广东省深圳市'
  },
  {
    code: '数据中心2',
    name: '管理员：李四',
    dress: '广东省深圳市'
  },
  {
    code: '数据中心3',
    name: '管理员：李四',
    dress: '广东省深圳市'
  },
  {
    code: '数据中心4',
    name: '管理员：李四',
    dress: '广东省深圳市'
  },
  {
    code: '数据中心5',
    name: '管理员：李四',
    dress: '广东省深圳市'
  },
  {
    code: '数据中心6',
    name: '管理员：李四',
    dress: '广东省深圳市'
  }
])

const handleChange = (item) => {
  console.log(item)
  // 点击某条数据中心，更新右侧与下面的数据
  // zcgkData.value = 
}

const zcgkData = ref({
  // 机房个数
  jfTotal: 8,
  // 机房面积
  areaData: 100,
  // 机房信息
  jfData: {
    机房1: {
      treemapData: [
      {
        name: '总面积',
        value: 140,
        children: [
          {
            name: '已用面积',
            value: 100,
            itemStyle: {
              color: '#3fb1e3' // 橙色
            }
          },
          {
            name: '其他',
            value: 40,
            itemStyle: {
              color: '#6be6c1' // 蓝色
            },
            children: [
              {
                name: '公摊面积',
                value: 20,
                itemStyle: {
                  color: '#626c91' // 绿色
                }
              },
              {
                name: '未用面积',
                value: 20,
                itemStyle: {
                  color: '#5aa3a3' // 绿色
                }
              }
            ]
          }
        ]
      }],
      cabinet: [
        { value: 10, ratio: 83.3, name: '已使用机柜' },
        { value: 2, ratio: 16.7, name: '未使用机柜' },
      ],
      unet: [
        { value: 6, ratio: 66.7, name: '已使用U位' },
        { value: 1, ratio: 11.1, name: '预规划U位' },
        { value: 2, ratio: 22.2, name: '未使用U位' },
      ],
      device: [
        { value: 10, ratio: 83.3, name: '已纳管设备' },
        { value: 2, ratio: 16.7, name: '未纳管设备' },
      ]
    },
    机房2: {
      treemapData: [
      {
        name: '总面积',
        value: 150,
        children: [
          {
            name: '已用面积',
            value: 100,
            itemStyle: {
              color: '#3fb1e3' // 橙色
            }
          },
          {
            name: '其他',
            value: 50,
            itemStyle: {
              color: '#6be6c1' // 蓝色
            },
            children: [
              {
                name: '公摊面积',
                value: 25,
                itemStyle: {
                  color: '#626c91' // 绿色
                }
              },
              {
                name: '未用面积',
                value: 25,
                itemStyle: {
                  color: '#5aa3a3' // 绿色
                }
              }
            ]
          }
        ]
      }],
      cabinet: [
        { value: 30, ratio: 90, name: '已使用机柜' },
        { value: 3, ratio: 10, name: '未使用机柜' },
      ],
      unet: [
        { value: 6, ratio: 66.7, name: '已使用U位' },
        { value: 1, ratio: 11.1, name: '预规划U位' },
        { value: 2, ratio: 22.2, name: '未使用U位' },
      ],
      device: [
        { value: 10, ratio: 83.3, name: '已纳管设备' },
        { value: 2, ratio: 16.7, name: '未纳管设备' },
      ]
    }
  },
})

const selectOptions = computed(() => {
  let res: any[] = []
  Object.keys(zcgkData.value.jfData).map((item) => {
     res.push({
      value: item,
      label: item
    })
  })

  return res;
})

// 当前选择框中选中的数据
const curOption = ref(selectOptions.value[0].label)

let curChartData: any = ref(zcgkData.value.jfData[curOption.value]);

watch(curOption, (newValue) => {
  curChartData.value = zcgkData.value.jfData[newValue]
}) 

const cabinetColor = ref(['rgba(63, 177, 227, 1)', 'rgba(107, 230, 193, 1)'])

const unetColor = ref(['rgba(121, 178, 45, 1)', 'rgba(98, 108, 145, 1)', 'rgba(241, 198, 115, 1)'])

const deviceColor = ref(['rgba(159, 144, 255, 1)', 'rgba(139, 212, 255, 1)'])

</script>

<template>
  <div class="card-wrapper">
    <card-module2 title="资产概况" width="100%" height="100%">
      <div class="zcgk">
        <div class="zcgk-t">
          <card-module width="29%" height="369px">
            <div class="zcgk-t-title">数据中心</div>
            <div class="zcgk-t-l-total">{{ dataCenter.length }}<span>个</span></div>
            <div class="zcgk-t-table">
              <div class="table-item" @click="handleChange(item)" v-for="(item, index) in dataCenter" :key="index">
                <div class="w-1/5">{{ item.code }}</div>
                <div class="w-1/3">{{ item.name }}</div>
                <div class="w-1/3">{{ item.dress }}</div>
              </div>
            </div>
          </card-module>
          <card-module width="67%" height="369px">
            <div class="zcgk-t-title">机房</div>
            <div class="machine h-full w-full flex">
              <div class="machine-left w-1/3 h-full">
                <div class="zcgk-t-l-total">{{ zcgkData.jfTotal }}<span>个</span></div>
                <div class="zcgk-t-l-zmj">总面积</div>
                <div class="zcgk-t-l-total zcgk-t-l-total-zmj">{{ zcgkData.areaData }}<span>m³</span></div>
                <div class="machine-change">
                  <p>切换机房以查看机房详情</p>
                  <el-select
                    v-model="curOption"
                    placeholder="请选择机房查看相关内容"
                    size="small"
                    class="select"
                  >
                    <el-option
                      v-for="item in selectOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
              <div class="machine-right w-2/3 h-full">
                <treemap :data="curChartData.treemapData" width="100%" height="100%" />
              </div>
            </div>
          </card-module>
        </div>
        <!-- 资产概况三个饼图 -->
        <div class="zcgk-b">
          <card-module width="31%" height="383px">
            <div style="position: relative;">
              <info-single class="zcgk-b-title" name="机柜总数" value="100" unit="个" />
              <pie-half  width="100%" height="400px" :showItem="true" :data="curChartData.cabinet" :color="cabinetColor" />
            </div>
          </card-module>
          <card-module width="31%" height="383px">
            <div style="position: relative;">
              <info-single class="zcgk-b-title" name="U位总数" value="100" unit="个" />
              <pie-half  width="100%" height="400px" :showItem="true" :data="curChartData.unet" :color="unetColor" />
            </div>
          </card-module>
          <card-module width="34%" height="383px">
            <div style="position: relative;">
              <info-single class="zcgk-b-title" name="设备总数" value="100" unit="个" />
              <pie-half  width="100%" height="400px" :showItem="true" :data="curChartData.device" :color="deviceColor" />
            </div>
          </card-module>
        </div>
      </div>
    </card-module2>
  </div>
</template>

<style scoped lang="stylus">
.card-wrapper {
  margin: 0 27px 0 0;
  height: 867px;
}
.zcgk {
  padding: 12px 37px 0 10px;
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.zcgk-t {
  display: flex;
  justify-content: space-between;
  .zcgk-t-title {
    position: absolute;
    left: 16px;
    top: 11px;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
  }
  .zcgk-t-l-total {
    margin-top: 37px;
    font-size: 36px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    span {
      display: inline-block;
      font-size: 18px;
      padding-left: 3px;
    }
  }
  .zcgk-t-l-zmj{
    margin-top: 49px;
  }
  .zcgk-t-l-total-zmj {
    margin-top: 7px;
  }
  .zcgk-t-table {
    margin-top: 39px;
    height: 223px;
    overflow: auto;
    padding: 0 15px 0 7px;
    width: 100%;
    /* 自定义滚动条样式 */
    // scrollbar-width: thin;
    // scrollbar-color: rgba(33, 150, 243, 1) #E3EFF7;
    -ms-overflow-style: none;  /* IE 10+ */
    scrollbar-width: none;  /* Firefox */
    .table-item {
      margin-bottom: 6px;
      height: 40px;
      width: 100%;
      line-height: 40px;
      padding: 0 3px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      text-align: center;
      &:hover {
        background: rgba(33, 150, 243, 1);
      }
      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .machine {
    padding: 0 23px 0 19px;
    width: 100%;
    .machine-left {
      .machine-change {
        margin-top: 45px;
        height: 54px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        p {
          font-size: 14px;
          font-weight: 300;
        }
        .select {
          width: 194px;
          font-size: 12px;
          font-weight: 300;
        }
      }
    }
    .machine-right {
    }
  }
}
.zcgk-b {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  position: relative;
  .zcgk-b-title {
    position: absolute;
    left: 15px;
    top: 10px;
  }
}
</style>